<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板编译-mustache使用</title>
</head>

<body>
    <div id="container"></div>
</body>
<script src="./lib/mustache.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.0.0/mustache.js"></script> -->
<script id="template" type="text/template">
    <ul>
        {{#data}}
            <li>
                <ol>
                    <li>姓名：{{name}}</li>
                    <li>年龄：{{age}}</li>
                    <li>性别：{{gender}}</li>
                    <li>
                        爱好：
                        {{#hobbies}}
                        <span>{{.}}</span>
                        {{/hobbies}}
                    </li>
                </ol>
            </li>
        {{/data}}
    </ul>
</script>
<script>
    const container = document.getElementById('container')
    const result = {
        data: [
            { name: '张三', age: '17', gender: 'man', hobbies: [123124, 4156, 1234432] },
            { name: '李四', age: '17', gender: 'man', hobbies: [123124, 4156, 1234432] },
            { name: '王五', age: '17', gender: 'man', hobbies: [123124, 4156, 1234432] },
            { name: '赵六', age: '17', gender: 'man', hobbies: [123124, 4156, 1234432] },
        ]
    }
    const templateStr = document.getElementById('template').innerHTML
    const template = Mustache.render(templateStr, result)
    //console.log('templateStr: ', templateStr);
    container.innerHTML = template;
    // console.log('template: ', template);
</script>

</html>